---
title: Auto Height
description: Learn how to use the Auto Height plugin for Embla Carousel
order: 2
date: 2022-01-14
---

import { Tabs } from 'components/Tabs/Tabs'
import { TabsItem } from 'components/Tabs/TabsItem'
import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
import { AutoHeight } from 'components/Examples/Plugins/AutoHeight'

# Auto Height

<RepositoryLink to="https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-auto-height">
  View plugin on GitHub
</RepositoryLink>

This plugin is used to extend Embla Carousel with **auto height** functionality. It changes the height of the carousel container to fit the height of the highest slide in view.

---

## Example

<AutoHeight />

## Installation

First you need to install the **npm package** and save it to your dependencies:

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.CDN}>

    ```html
    <script src="https://unpkg.com/embla-carousel-auto-height/embla-carousel-auto-height.umd.js"></script>
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

    ```shell
    npm install embla-carousel-auto-height --save
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

    ```shell
    yarn add embla-carousel-auto-height
    ```

  </TabsItem>
</Tabs>

<Admonition type="note">

You can make use of CSS transitions to **transition height** changes. But beware: Transitioning height triggers reflow and may cause a performance hit.

<br />

```css
.embla__container {
  transition: height 0.2s;
}
```

</Admonition>

<Admonition type="warning">

If you've been following along with any of the guides in the [get started](/get-started/) section, you want to make sure that each **slide height** is **determined** by the **content** it holds. Add the following to your CSS to achieve this:

<br />

```css highlight={3}
.embla__container {
  display: flex;
  align-items: flex-start; /* Add this */
}
```

</Admonition>
